<template>
  <section class="my-shoppingcart">
    <van-checkbox-group :value="result" @change="onChange">
      <van-swipe-cell :right-width="65" v-for="item in list" :key="item">
        <div class="commodity">
          <van-checkbox :name="item.id" custom-class="checkbox" checked-color="#FF9C00">
            <div class="flex flex-between">
              <img :src="item.frontPicUrl" />
              <div class="left flex-col flex-between">
                <div class="title">{{item.productName}}</div>
                <div class="desc flex flex-between">
                  <span>{{item.colorName}} 商品属性</span>
                  <span>X{{item.buyNums}}</span>
                </div>
                <div class="flex flex-between">
                  <div class="price">￥{{item.price}}</div>
                  <div class="tag" @click.stop="edit(item.id,item.productId,item)">编辑</div>
                </div>
              </div>
            </div>
          </van-checkbox>
        </div>
        <view slot="right" class="del" @click="del(item.id)">
          <span>删除</span>
        </view>
      </van-swipe-cell>
    </van-checkbox-group>
    <van-action-sheet :show="visibleOrder" title="编辑" @close="visibleOrder = !visibleOrder">
      <div class="buy-info">
        <div class="base flex">
          <img :src="imgUrl" class="small-cover" />
          <div class="desc">
            <div class="price desc--margin">¥{{infoPrice}}</div>
            <div class="desc-tag">
              {{info.defaultColorName ||info.defaultSpecsName ? '已选' : '未选择'}}
              <span
                v-if="info.defaultColorName"
              >{{info.defaultColorName}}</span>
              <span v-if="info.defaultSpecsName">{{info.defaultSpecsName}}</span>
            </div>
          </div>
        </div>
        <div class="choose-content">
          <div class="choose-title">颜色</div>
          <ul class="choose-tags">
            <li
              :class="item.colorId === colorId ? 'acitve' : ''"
              v-for="(item,index) in info.productColorList"
              :key="index"
              @click="checkedColor(item)"
            >{{item.colorName}}</li>
          </ul>
        </div>
        <div class="choose-content">
          <div class="choose-title">尺寸</div>
          <ul class="choose-tags">
            <li
              :class="item.specsId === specsId ? 'acitve' : ''"
              v-for="(item,index) in info.productSpecsList"
              :key="item.specsId"
              @click="checkedSpecs(item)"
            >{{item.specsName}}</li>
          </ul>
        </div>
        <div class="buy-number">
          <span>购买数量</span>
          <div class="option">
            <div class="option-box sub" @click="changeNumber('-')">-</div>
            <input class="option-box input" type="number" v-model="number" />
            <div class="option-box add" @click="changeNumber('+')">+</div>
          </div>
        </div>
      </div>
      <div class="choose-btn" @click="updateShipCar">确定</div>
    </van-action-sheet>
    <div class="bottom flex-between flex flex-middle">
      <van-checkbox checked-color="#FF9C00" :value="isAll" @change="allChange">全选</van-checkbox>
      <div class="flex flex-middle">
        <span class="total">总计：</span>
        <span class="price">￥{{price}}</span>
        <button class="pay" @click="shopCarSettle">结算</button>
      </div>
    </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      result: [],
      isAll: false,
      visibleOrder: false, //弹出控制
      info: "", //编辑购物车信息
      number: 1,
      colorId: null,
      colorName: "",
      specsName: "",
      specsId: null,
      cartId: "",
      imgUrl:'',
      infoPrice:''
    };
  },
  onShow() {
    Object.assign(this.$data, this.$options.data());
    this.getShopCarList();
  },
  computed: {
    price() {
      let p = 0;
      this.list.forEach((item, index) => {
        this.result.forEach((n, i) => {
          if (item.id == n) {
            p += item.price * item.buyNums;
          }
        });
      });
      return p.toFixed(2);
    }
  },
  methods: {
    routerTo(id) {
      wx.navigateTo({ url: "../orderdetail/index?id=" + id });
    },
    //checkbox-group
    onChange(e) {
      this.result = e.mp.detail;
      this.isAll = this.result.length == this.list.length;
     
    },
    allChange(e) {
      this.isAll = e.mp.detail;
      //全选
      if (e.mp.detail) {
        this.result = this.list.map(item => {
          let id = item.id + "";
          return id;
        });
      } else {
        this.result = [];
      }
    },
    changeNumber(type) {
      if (type === "-" && this.number > 1) {
        this.number -= 1;
      } else if (type === "+") {
        this.number += 1;
      }
    },
    checkedSpecs(item) {
      this.specsId = item.specsId;
      this.specsName = item.specsName;
      this.$nextTick(res => {
        this.changePrice(item);
      });
    },
    checkedColor(item) {
      this.colorId = item.colorId;
      this.colorName = item.colorName;
      this.$nextTick(res => {
        this.changePrice(item);
        this.imgUrl = this.info.productPicList.find(
          item => item.colorId === this.colorId
        ).picUrl;
      });
    },
    //根据颜色和规格改变金额
    changePrice(item) {
      this.$api
        .getProductPrice({
          productId: this.info.productId,
          colorId: this.colorId,
          specsId: this.specsId
        })
        .then(({ data }) => {
          this.infoPrice = data.price;
        });
    },
    getShopCarList() {
      this.$api.getShopCarList().then(res => {
        this.list = res.data.shopCarList;
      });
    },
    // 购物车结算
    shopCarSettle() {
      if (!this.result.length) {
        return;
      }
      var ids = this.result.map(id => {
        let obj = {};
        obj.id = id;
        return obj;
      });
      this.$api.shopCarSettle({ shopCarIds: ids }).then(res => {
        if(res.code == 0){
          this.globalData.addressInfo = res.data.address;
          this.globalData.shopOrderInfo = res.data;
          wx.navigateTo({ url: '/pages/shop/pay/main' });
        }
      });
    },
    //编辑按钮
    edit(id, productId,item) {
      this.getDetail(productId);
      this.cartId = id;
      this.specsId = item.specsId;
      this.colorId = item.colorId;
      this.colorName = item.colorName;
      this.specsName = item.specsName;
      this.number = item.buyNums;
      this.imgUrl = item.frontPicUrl;
      this.infoPrice = item.price;
      this.visibleOrder = !this.visibleOrder;
    },
    //购物车删除
    del(id) {
      var _this = this;
      wx.showModal({
        title: "删除", //提示的标题,
        content: "确定删除？", //提示的内容,
        showCancel: true, //是否显示取消按钮,
        cancelText: "取消", //取消按钮的文字，默认为取消，最多 4 个字符,
        cancelColor: "#000000", //取消按钮的文字颜色,
        confirmText: "确定", //确定按钮的文字，默认为取消，最多 4 个字符,
        confirmColor: "#3BB8FD", //确定按钮的文字颜色,
        success: res => {
          if (res.confirm) {
            _this.$api.deleteShipCar({ shopCars: [{ id }] }).then(res => {
              _this.getShopCarList();
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        }
      });
    },
    //修改购物车
    updateShipCar() {
      let params = {
        shopCarId: this.cartId,
        colorId: this.colorId,
        specsId: this.specsId,
        buyNums: this.number
      };
      this.$api.updateShipCar(params).then(res => {
        if (res.code == 0) {
          this.getShopCarList();
          this.visibleOrder = !this.visibleOrder;
        }
      });
    },
    //商品详情
    getDetail(id) {
      this.$api
        .getProductInfo({
          productId: id
        })
        .then(({ data }) => {
          this.info = data;
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.my-shoppingcart {
  background: #f7f7f7;
  padding-bottom: 64px;
  .commodity {
    margin-top: 10px;
    padding: 25px 15px;
    border-radius: 5px;
    background: white;
    .status {
      text-align: right;
      font-size: 15px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(59, 184, 253, 1);
      line-height: 13px;
    }
    img {
      width: 70px;
      height: 70px;
      border-radius: 4px;
      margin: 0 10px 0 15px;
    }
    .left {
      width: 220px;
      .tag {
        width: 35px;
        height: 16px;
        border: 1px solid rgba(222, 222, 222, 1);
        border-radius: 2px;
        font-size: 12px;
        font-family: PingFang;
        font-weight: 400;
        color: rgba(255, 156, 0, 1);
        line-height: 16px;
        text-align: center;
      }
      .title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 15px;
        font-family: PingFang;
        font-weight: 500;
        color: rgba(46, 46, 46, 1);
        line-height: 21px;
      }
      .desc {
        font-size: 12px;
        font-family: PingFang;
        font-weight: 500;
        color: rgba(193, 196, 201, 1);
        line-height: 21px;
      }
      .price {
        font-size: 15px;
        font-family: PingFang;
        font-weight: 500;
        color: rgba(255, 156, 0, 1);
        line-height: 22px;
      }
      .num {
        font-size: 15px;
        font-family: PingFang;
        font-weight: 500;
        color: rgba(46, 46, 46, 1);
        line-height: 21px;
      }
    }
  }
  .del {
    color: #fff;
    background-color: #f44;
    border: 1px solid #f44;
    height: 100%;
    width: 65px;
    text-align: center;
    position: relative; //在父元素中使用相对定位
    span {
      position: absolute; /*在子元素中使用绝对定位*/
      top: 50%; /*距离相对于父元素的50%的高*/
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .bottom {
    box-sizing: border-box;
    width: 375px;
    height: 54px;
    background: rgba(255, 255, 255, 1);
    position: fixed;
    left: 0;
    bottom: 0;
    border-top: 1px solid #e9e9e9;
    padding: 0 15px 0 25px;
    .total,
    .price {
      font-size: 15px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(102, 102, 102, 1);
      line-height: 21px;
    }
    .total {
      color: #666666;
    }
    .price {
      color: #ff9c00;
    }
    .pay {
      width: 60px;
      height: 28px;
      background: rgba(255, 156, 0, 1);
      border-radius: 14px;
      font-size: 15px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 28px;
      margin-left: 18px;
      padding: 0;
    }
  }
  .buy-info {
    padding: 15px;
    .desc {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    .desc-tag {
      padding: 0px 10px 15px;
    }
    .desc--margin {
      padding-bottom: 0px;
    }
    .choose-title {
      line-height: 40px;
    }
    .choose-tags {
      display: flex;
      flex-wrap: wrap;
      li {
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: #f6f6f6;
        border-radius: 2px;
        box-sizing: border-box;
        font-size: 12px;
        color: #5e646b;
        margin-right: 10px;
        margin-bottom: 10px;
      }
      li.acitve {
        border: 1px solid $yellow-color;
        background: #fff7ec;
        color: $yellow-color;
      }
    }
    .buy-number {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .option {
      display: flex;
      align-items: center;
    }
    .option-box {
      width: 25px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      font-size: 20px;
      color: #666;
      margin-left: 5px;
      background: #f6f6f6;
    }
    .input {
      font-size: 15px;
      width: 40px;
    }
    .shop-img {
      width: 355px;
      margin-bottom: 10px;
    }
    .small-cover {
      width: 120px;
      height: 120px;
    }
    .price {
      font-size: 15px;
      color: $yellow-color;
      line-height: 30px;
      padding: 10px 15px;
      .number {
        font-size: 12px;
        color: $grey-color;
        margin-left: 15px;
      }
    }
  }
  .choose-btn {
    height: 48px;
    line-height: 48px;
    text-align: center;
    background: $yellow-color;
    color: #fff;
    font-size: 18px;
  }
}
</style>
<style lang="scss">
page{
  background: #f7f7f7;
}
.commodity {
  .van-checkbox__icon-wrap {
    margin-top: 30px;
  }
}
</style>